<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>订单详情 | 机械配件商城</title>
		<link rel="stylesheet" type="text/css" href="./element-ui/index.css">
		<link rel="stylesheet" type="text/css" href="./css/common.css" />
		<link rel="stylesheet" type="text/css" href="./components/min-width-container.css"/>
		<link rel="stylesheet" type="text/css" href="./components/footer-bottom.css"/>
		<link rel="stylesheet" type="text/css" href="./components/footer-image.css" />
		<link rel="stylesheet" type="text/css" href="./components/footer-link.css" />
		<link rel="stylesheet" type="text/css" href="./components/header-full.css" />
		<link rel="stylesheet" type="text/css" href="./components/user-frame.css" />
		<style>
			.app-title{
				border-bottom: 2px solid #EAEAEA;
			}
			
			.app-title-text:before{
				content: "";
				display: block;
				position: absolute;
				width: 0px;
				height: 0px;
				border-left: 5px solid transparent;
				border-top: 5px solid transparent;
				border-right: 5px solid transparent;
				border-bottom: 5px solid #3197D7;
				bottom: 0;
				right: 53px;
			}
			
			.app-title-text{
				color: #3197D7;
				border-bottom: 2px solid #3197D7;
				display: inline-block;
				position: relative;
				width: 116px;
				height: 36px;
				line-height: 34px;
				text-align: center;
				cursor: pointer;
				top: 2px;
			}
			
			.app-order{
				margin: 30px 0;
				padding: 20px;
			}
			
			.app-order-warpper{
				border: 1px solid #DAE5F2;
				padding: 16px;
			}
			
			.app-order-warpper div{
				line-height: 2;
			}
			
			.app-order-warpper-title{
				font-weight: 900;
			}
			
			.app-order-warpper .el-button--mini{
				padding: 4px 8px;
			}
			
			.app-order-grid{
				border: 1px solid #E3E3E3;
			}
			
			.app-order-grid-row{
				display: grid;
				grid-template-columns: 1fr 100px 100px 100px;
				grid-template-rows: 80px;
			}
			
			.app-order-grid-row > div{
				line-height: 80px;
			}
			
			.app-order-grid-row:first-child{
				grid-template-rows: 60px;
				background: #F0F0F0;
			}
			
			.app-order-grid-row:first-child > div{
				line-height: 60px;
			}
			
			.app-order-grid-row-item{
				border-top: 1px solid #E3E3E3;
			}
		</style>
	</head>
	<body>
		<div id="app">
			
			<header-full :bordered="true"></header-full>
			<user-frame class="m-t-20">
				<div class="app-title">
					<div class="app-title-text">订单详情</div>
				</div>
				<div class="app-order">
					<div class="app-order-warpper text-4 text-general-1">
						<div class="app-order-warpper-title">订单状态：{{order.statusDesc}}</div>
						<el-divider></el-divider>
						<div class="app-order-warpper-title">收货地址</div>
						<div>收货联系方式: {{order.addr.province}} {{order.addr.city}} {{order.addr.district}} {{order.addr.addr}} {{order.addr.zip}} {{order.addr.name}}
							{{order.addr.mobile}}</div>
						<el-divider></el-divider>
						<div>订单信息</div>
						<el-row>
						  <el-col :span="12">
							  <div>订单编号: {{order.orderNo}}</div>
							  <div>商品合计(促销金额): ¥{{order.amount.toFixed(2)}}</div>
							  <div>应支付金额: ¥{{order.amount.toFixed(2)}}</div>
							  <div>发货时间: {{order.deliveryTime}}</div>
							  <div>物流单号: </div>
							  <div>收货时间: {{order.finishTime}}</div>
							  <div>支付状态: {{order.statusDesc}}</div>
						  </el-col>
						  <el-col :span="12">
							  <div>下单时间: {{order.createTime}}</div>
							  <div>店铺合计金额: ¥{{order.amount.toFixed(2)}}</div>
							  <div>发票抬头: </div>
							  <div>物流公司: </div>
							  <div>物流联系方式: </div>
							  <div>支付金额: </div>
							  <div>支付时间: </div>
						  </el-col>
						</el-row>
						<div>
							<el-button v-if="order.statusDesc === '未付款'" type="primary" size="mini" class="m-t-12 m-b-12" @click="go_pay">立即支付</el-button>
							<el-button v-if="order.statusDesc === '未付款'" type="text" size="mini" class="m-t-12 m-b-12" @click="go_cancel">取消订单</el-button>
							<el-button v-if="order.statusDesc === '已发货'" type="primary" size="mini" class="m-t-12 m-b-12" @click="go_receive">确认收货</el-button>
						</div>
						<div class="app-order-grid  center m-b-20">
							<div class="app-order-grid-row">
								<div>商品</div>
								<div>单价(元)</div>
								<div>数量</div>
								<div>商品总价</div>
							</div>
							<div class="app-order-grid-row app-order-grid-row-item" v-for="item in order.orderItems">
								<div>{{item.commodityName}}</div>
								<div>¥{{item.curPrice.toFixed(2)}}</div>
								<div>{{item.quantity}}</div>
								<div>¥{{item.totalPrice.toFixed(2)}}</div>
							</div>
						</div>
					</div>
				</div>
			</user-frame>
			<footer-image></footer-image>
			<footer-link></footer-link>
			<footer-bottom></footer-bottom>
		</div>
		
		<script src="./js/vue.js"></script>
		<script src="./js/axios.min.js"></script>
		<script src="./element-ui/index.js"></script>
		<script src="./components/min-width-container.js"></script>
		<script src="./components/footer-image.js"></script>
		<script src="./components/footer-bottom.js"></script>
		<script src="./components/footer-link.js"></script>
		<script src="./components/header-full.js"></script>
		<script src="./components/user-frame.js"></script>
		<script>
		    const app = new Vue({
		        el: "#app",
		        data(){
					return {
						orderNo: '',
						order: {}
					};
		        },
		        created(){
		        	if(/^\?\d+$/.test(window.location.search)){
		        		const query = window.location.search.trim();
		        		this.orderNo = query.substring(1, query.length);
		        		//console.log(this.orderNo);

						const params = new URLSearchParams();
						params.append("orderNo", this.orderNo)
						axios.post("/order/getdetail.do", params).then(response=>{
							if(response.data.status === 0){
								this.order = response.data.data;
							}else{
								if(response.data.msg){
									console.log(response.data.msg);
								}
							}
						}).catch(err=>{
							console.log(err);
						});
		        	}else{
		        		this.$message.error("非法的访问");
		        	}
		        },
		        methods: {
					go_pay(){
						window.location.href = "/pay.html?" + this.orderNo;
					},
					go_cancel(){
						this.$confirm('取消此订单, 是否继续?', '提示', {
						    confirmButtonText: '确定',
						    cancelButtonText: '取消',
						    type: 'warning'
						}).then(() => {
						    const params = new URLSearchParams();
						    params.append("orderNo", this.orderNo);
						    axios.post("/order/cancelorder.do", params).then(response=>{
						  		if(response.data.status === 0){
									this.$message({
										message: "取消成功",
										type: "success"
									});
									this.order.status = 5;
									this.order.statusDesc = "取消";
						  		}else{
						  			if(response.data.msg){
						  	    		this.$message.error(response.data.msg);
						  			}
						  		}
						    }).catch(err=>{
						  	    console.log(err);
						  	    this.$message.error("连接服务器异常");
						    });

						})
					},
					go_receive(){
						const params = new URLSearchParams();
						params.append("orderNo", this.orderNo);
						axios.post("/order/confirmreceipt.do", params).then(response=>{
							if(response.data.status === 0){
								this.$message({
									message: "收货成功",
									type: "success"
								});
								this.order.status = 3;
								this.order.statusDesc = "交易成功";
							}else{
								if(response.data.msg){
									this.$message.error(response.data.msg);
								}
							}
						}).catch(err=>{
							console.log(err);
							this.$message.error("连接服务器异常");
						});
					}
		        }
		    });
			
		</script>
	</body>
</html>
